/**
产品列表页
 */
<template>
    <div>
        <TopNav />
        <div  style="max-width:1200px;margin:auto;margin-top: 30px;">
            <!--查询条件：分类、品牌、价格区间-->
            <div>
                <div class="brand">
                    分类：
                    <el-tag v-for="(sub, index2) in categoryFirstListData" :key="index2" @click="getSubCategory(sub.id)">{{
                        sub.name }}</el-tag>

                </div>
                <div class="brand">
                    子类：<el-tag v-for="(sub, index2) in categorySecondListData" :key="index2"
                        @click="eventSearchDataByBrand(sub.id, sub.name)">{{ sub.name }}</el-tag>


                </div>
                <div class="brand">

                    品牌：
                    <el-tag @click="eventSearchDataByBrand('', '')">全部</el-tag>
                    <el-tag v-for="(sub, index2) in brandListData" :key="index2"
                        @click="eventSearchDataByBrand(sub.id, sub.name)">{{ sub.name }}</el-tag>
                </div>
                <div class="brand">
                    <el-button size="mini" @click="eventSort('sale')">销量</el-button>
                    <el-button size="mini" @click="eventSort('price')"><i :class="sort.price.icon"></i>价格</el-button>
                </div>
            </div>

            <!--排序条件-->
            <div></div>

            <!--数据列表-->
            <div>
                <el-row :gutter="20">
                    <el-col :span="6" v-for="(o, index) in listData" :key="index" style="margin-bottom:20px;">
                        <el-card :body-style="{ padding: '0px' }">
                            <img @click="test(o)"
                                src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                                class="image">
                            <div style="padding: 14px;">
                                <span>
                                    <router-link :to="{ path: '/product/detail', query: { id: o.id } }">
                                        {{ o.name }}
                                    </router-link>
                                </span>
                                <div class="bottom clearfix">
                                    <time class="time" style="color:red">￥{{ o.salePrice.toFixed(2) }}</time>
                                    <el-button type="danger" size="small" class="button">加入购物车</el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>

            <!--分页-->
            <div></div>
        </div>
    </div>
</template>

<script>

import TopNav from '@/components/TopNav.vue'

export default {
    components: {
        TopNav
    },
    data() {
        return {
            listData: [],
            brandListData: [],
            categoryListData: [],
            categoryFirstListData: [],
            categorySecondListData: [],
            selectedBrandId: '',
            sort: {
                sortField: 'id',
                isAsc: true,
                price: {
                    icon: 'el-icon-top'
                }
            }
        }
    },
    created() {

    },
    mounted() {
        this.onloadData();
        this.onloadBrandListData()
        this.onloadCategoryListData()
    },
    methods: {
        //排序按钮的单击事件
        eventSort(field) {
            if (this.sort.isAsc) {
                this.sort.isAsc = false
                this.sort.price.icon = "el-icon-bottom"
            }
            else {
                this.sort.isAsc = true
                this.sort.price.icon = "el-icon-top"
            }
            this.sort.sortField = field
            this.onloadData()
        },

        //品牌的单击事件
        eventSearchDataByBrand(id, name) {
            console.log(id + ',' + name)
            this.selectedBrandId = id
            this.onloadData()
        },
        //加载sku列表数据
        onloadData() {
            let url = this.$baseUrl + '/product/sku'
            this.$http.get(url, {
                params: {
                    brandId: this.selectedBrandId,
                    sortField: this.sort.sortField,
                    isAsc: this.sort.isAsc
                }
            }).then(res => {
                //console.log(res);                
                this.listData = res.data.data
            })
        },
        //加载所有品牌数据
        onloadBrandListData() {
            let url = this.$baseUrl + '/product/brand'
            this.$http.get(url).then(res => {
                //console.log(res)
                this.brandListData = res.data.data
            }).catch(error => {
                //console.log(error)
                if (error.code == "ERR_BAD_REQUEST") {
                    this.$message.error(error.message)
                }
            })
        },
        //加载所有分类数据
        onloadCategoryListData() {
            let url = this.$baseUrl + '/product/category/recurision'
            this.$http.get(url).then(res => {
                console.log(res)
                this.categoryListData = res.data.data
                this.categoryFirstListData = res.data.data.filter(x => x.parentId == '00000000-0000-0000-0000-000000000000')
            })
        },
        getSubCategory(id) {
            this.categorySecondListData = this.categoryListData.filter(x => x.parentId == id)
        }
    }
}
</script>

<style scoped>
.brand {
    text-align: left;
    margin-bottom: 50px;
}

.brand span {
    margin-right: 10px;
    cursor: pointer;
}
</style>